<template>
    <div>
        <!-- loding图 -->
        <img src="/images/loading.gif" class="loadinggif"  v-show="!big_image_box_w">

        <div class="flex_wrap" v-show="big_image_box_w">
            <!-- 大图框，红框 -->
            <div class="big_image_box" :style="{ 'width': `${big_image_box_w}px`, 'height': `${big_image_box_h}px` }">
                <!-- 大图。绝对定位了，它就释放位置了，裁切框在标准文档流中，就能够盖住它了。 -->
                <img :src="picURL" class="big_image">

                <!-- 遮罩。绝对定位写在下面的，会盖住写在上面的。 -->
                <div class="mask"></div>

                <!-- 裁切框 -->
                <VueDraggableResizable v-if="big_image_box_w && big_image_box_h" :lock-aspect-ratio="true"
                    :parent="true"
                    :style="{ 'background-image': `url(${picURL})`, 'background-size': `${big_image_box_w}px ${big_image_box_h}px`, 'background-position': `${-x - 1}px ${-y - 1}px` }"
                    :x="x" :y="y" :w="w" :h="h" @resizing="onResizing" @dragging="onDragging"></VueDraggableResizable>
            </div>

            <!-- 预览框 -->
            <div class="previews_box">
                <div class="da" :style="getPrevStyle(200)"></div>

                <div class="zhong" :style="getPrevStyle(120)"></div>

                <div class="xiao" :style="getPrevStyle(70)"></div>
            </div>
        </div>
    </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';
// 引入样式表
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

export default {
    props: ['picURL'],
    components: {
        VueDraggableResizable
    },
    async created() {
        // 得到图片原始宽高
        const o = await this.getImageWH(this.picURL);
        // 设置成data值
        this.imageOriginW = o.w;
        this.imageOriginH = o.h;
        // 我们限制的宽高
        let restrictW = 300;
        let restrictH = 400;
        // 看图片的宽高比，是大了、还是小了
        if (this.imageOriginW / this.imageOriginH > restrictW / restrictH) {
            this.big_image_box_w = restrictW;
            this.big_image_box_h = restrictW * (this.imageOriginH / this.imageOriginW);
        } else {
            this.big_image_box_h = restrictH;
            this.big_image_box_w = restrictH * (this.imageOriginW / this.imageOriginH);
        }

        // 裁切框的初始值
        if (this.big_image_box_w < 100) {
            this.w = this.big_image_box_w;
            this.h = this.big_image_box_w;
        }

        if (this.big_image_box_h < 100) {
            this.w = this.big_image_box_h;
            this.h = this.big_image_box_h;
        }
    },
    data() {
        return {
            // 下面四个值是裁切框的
            x: 0,
            y: 0,
            w: 100,
            h: 100,
            // 图片原始宽度
            imageOriginW: 0,
            imageOriginH: 0,
            // 大盒子最后计算得到的
            big_image_box_w: 0,
            big_image_box_h: 0
        }
    },
    methods: {
        // 得到图片的原始宽度、高度比
        getImageWH(picURL) {
            return new Promise(resolve => {
                // 如何得到图片的真实尺寸
                // Image是内置构造函数，表示创建一个图片
                // 孤儿节点，不上树，也不用上树。因为我们的目的是知道宽高。
                var img = new Image();
                // 当图片加载完毕之后，做的事情
                img.onload = function () {
                    resolve({ w: this.width, h: this.height });
                }
                // 开始加载图片
                img.src = picURL;
            });
        },
        onResizing(x, y, w, h) {
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        },
        onDragging(x, y) {
            this.x = x;
            this.y = y;
        },
        // 得到预览框的style对象
        getPrevStyle(prevBoxW) {
            return {
                backgroundImage: `url(${this.picURL})`,
                backgroundSize: `${(this.big_image_box_w * prevBoxW) / this.w}px ${(this.big_image_box_h * prevBoxW) / this.h}px`,
                backgroundPosition: `${-prevBoxW * this.x / this.w}px ${-prevBoxW * this.y / this.h}px`
            }
        }
    },
}
</script>

<style lang="less" scoped>

.loadinggif {
    width: 350px;
    height: auto; 
    display: block; 
    margin: 0 auto;
}

.flex_wrap {
    display: flex;

    .big_image_box {

        border: 3px solid red;
        position: relative;

        .big_image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.337);
        }
    }

    .previews_box {
        width: 200px;
        margin-left: 60px;
        display: flex;

        // 改变轴朝向
        flex-direction: column;
        // 副轴居中
        align-items: center;

        .da {
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            margin-bottom: 10px;
        }

        .zhong {
            width: 120px;
            height: 120px;
            border: 2px solid #000;
            margin-bottom: 10px;
        }

        .xiao {
            width: 70px;
            height: 70px;
            border: 2px solid #000;
            margin-bottom: 10px;
        }
    }
}
</style>